.mine {

  // 合并 display-flex
  .display-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .mr-5 {
    margin-right: 10rpx;
  }

  .mr-10 {
    margin-right: 20rpx;
  }

  .mr-25 {
    margin-right: 50rpx;
  }

  .mt-5 {
    margin-top: 10rpx;
  }

  .mr-auto {
    margin-right: auto !important;
  }

  &.page {
    background-color: #f8f8f8;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding: 24rpx 0rpx 100rpx 0rpx;

      // background-image: linear-gradient(171.1deg, #1c2c60 0%, #1d2f65 -14.46%, #adb4c9 46.78%, #ea602d00 100%);
      .event-records-page {
        background: #fff;
        min-height: 100vh;
        padding: 24rpx 24rpx 32rpx 24rpx;

        .featured-record {
          margin-bottom: 32rpx;

          .record-card.featured {
            position: relative;
            border-radius: 16rpx;
            overflow: hidden;
            height: 200rpx; // 固定高度
            border: 1rpx dashed #969798;

            .bg-image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 1;
            }

            .content-overlay {
              position: relative;
              z-index: 2;
              padding: 24rpx;
              // display: flex;
              // align-items: center;
              height: 100%;



              .record-type {
                color: #fff;
                font-size: 26rpx;
                font-weight: 500;
                margin-bottom: 12rpx;
              }

              .record-main {
                display: flex;
                align-items: center;
                margin: 20rpx 0rpx;

                .name {
                  color: #fff;
                  font-size: 28rpx;
                  font-weight: 500;
                  margin-right: 12rpx;
                }

                .avatar {
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 50%;
                  margin-right: 16rpx;
                  border: 2rpx solid rgba(255, 255, 255, 0.2);
                }

                .record-info {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  justify-content: center;



                  .badge {
                    background: #fff;
                    color: #000;
                    padding: 8rpx 20rpx;
                    border-radius: 6rpx;
                    font-size: 20rpx;
                    font-weight: 700;
                  }
                }

                .record-score {
                  text-align: right;

                  .score {
                    color: #FEC42D;
                    font-size: 36rpx;
                    font-weight: 700;
                    line-height: 1;
                  }

                  // .location {
                  //   color: rgba(255, 255, 255, 0.7);
                  //   font-size: 22rpx;
                  //   margin-top: 2rpx;
                  // }
                }
              }

              .record-date-location {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .record-date {
                  color: #fff;
                  font-size: 26rpx;
                  // position: absolute;
                  // bottom: 16rpx;
                  // left: 24rpx;
                }

                .location {
                  color: #fff;
                  font-size: 26rpx;
                  // margin-top: 20rpx;
                }
              }


            }
          }
        }

        .group-tabs {
          display: flex;
          background: #ccc;
          border-radius: 12rpx;
          padding: 4rpx;
          margin-bottom: 24rpx;

          .tab {
            flex: 1;
            text-align: center;
            padding: 16rpx 0;
            font-size: 28rpx;
            color: #fff;
            border-radius: 30rpx;
            transition: all 0.3s ease;

            &.active {
              background: #213165;
              font-weight: 600;
            }
          }
        }

        .records-list {
          .record-card {
            position: relative;
            border-radius: 16rpx;
            overflow: hidden;
            margin-bottom: 30rpx;
            height: 200rpx; // 固定高度

            .bg-image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 1;
            }

            .card-tab {
              // position: absolute;
              // top: 0;
              // left: 0;
              // width: 0;
              // height: 0;
              // border-style: solid;
              // border-width: 0 32rpx 32rpx 0;
              // border-color: transparent #22306a transparent transparent;
              // z-index: 3; // 确保在背景之上
            }

            .content-overlay {
              position: relative;
              z-index: 2;
              padding: 20rpx 24rpx;
              height: 100%;
              border: 1rpx dashed #969798;
              // // 可选：添加半透明遮罩
              // &::before {
              //   content: '';
              //   position: absolute;
              //   top: 0;
              //   left: 0;
              //   width: 100%;
              //   height: 100%;
              //   background: rgba(0, 0, 0, 0.4); // 半透明黑色遮罩
              //   z-index: -1;
              // }

              .record-type {
                color: #fff;
                font-size: 26rpx;
                font-weight: 500;
                margin-bottom: 12rpx;
              }

              .record-main {
                display: flex;
                align-items: center;
                margin: 20rpx 0rpx;

                .name {
                  color: #fff;
                  font-size: 28rpx;
                  font-weight: 500;
                  margin-right: 12rpx;
                }

                .avatar {
                  width: 60rpx;
                  height: 60rpx;
                  border-radius: 50%;
                  margin-right: 16rpx;
                  border: 2rpx solid rgba(255, 255, 255, 0.2);
                }

                .record-info {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  justify-content: center;



                  .badge {
                    background: #fff;
                    color: #000;
                    padding: 8rpx 20rpx;
                    border-radius: 6rpx;
                    font-size: 20rpx;
                    font-weight: 700;
                  }
                }

                .record-score {
                  text-align: right;

                  .score {
                    color: #FEC42D;
                    font-size: 36rpx;
                    font-weight: 700;
                    line-height: 1;
                  }

                  // .location {
                  //   color: rgba(255, 255, 255, 0.7);
                  //   font-size: 22rpx;
                  //   margin-top: 2rpx;
                  // }
                }
              }

              .record-date-location {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .record-date {
                  color: #fff;
                  font-size: 26rpx;
                  // position: absolute;
                  // bottom: 16rpx;
                  // left: 24rpx;
                }

                .location {
                  color: #fff;
                  font-size: 26rpx;
                  // margin-top: 20rpx;
                }
              }
            }
          }
        }

      }




    }

    .movable-area {
      position: fixed;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100;
    }

    .fab-container {
      pointer-events: auto;
      width: 100rpx;
      height: 100rpx;
      background-color: transparent;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    }

    .fab-icon {
      width: 100%;
      height: 100%;
    }

    .text-wrapper {
      width: 90%;
      height: 90rpx;
      background-color: #1D428A;
      box-shadow: 0rpx 0rpx 18rpx 0rpx #ee73500a;
      border-radius: 22rpx;
      border: unset !important;
      // position: absolute;
      // bottom: 90rpx;
      // left: 50%;
      // transform: translate(-50%, 0);

      &::after {
        border: unset !important;
      }

      .text {
        color: #fff;
        font-size: 30rpx;
        font-family: 'PingFang SC';
        line-height: 90rpx;
      }
    }
  }
}